<!--
-流程属性
-->
<template>
  <div class="form">
    <a-form layout="vertical" :model="_flowData">
      <a-form-item label="权限设置">
        <a-button class="item-btn" block @click="showModal">设置调整负责人权限</a-button>
        <a-button class="item-btn" block @click="showModal">设置挂起/激活流程权限</a-button>
        <a-button class="item-btn" block @click="showModal">设置终止流程权限</a-button>
        <a-button class="item-btn" block @click="showModal">设置删除流程权限</a-button>
      </a-form-item>

      <a-form-item label="编号设置">
        <div class="draggable-option-title">
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link">
              <PlusOutlined :style="{ color: 'rgb(75, 100, 241)' }" />
              添加规则
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="0" @click="addsetRules('0')">
                  <span>固定字符</span>
                </a-menu-item>
                <a-menu-item key="0" @click="addsetRules('1')">
                  <span>复杂规则</span>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <Draggable tag="ul" item-key="index" ghostClass="ghost" handle=".drag-item" :group="{ name: 'options' }"
          :list="numberSetRules">
          <template #item="{ element, index }">
            <div class="draggable-option">
              <a-row>
                <CloseCircleFilled v-if="element.remove" @click="deleteRe(index)" />
                <a-col :span="1" className="drag-item"><span class="iconfont up-Sort drag-item">
                    <UnorderedListOutlined style="width:10px" />
                  </span></a-col>
                <a-col :span="21" class="draggable-option-list">
                  <div class="draggable-option-item">
                    <span class="draggable-option-item-label">{{ element.label }}</span>
                    <a-input v-if="element.label == '固定字符'" v-model:value="element.value" placeholder="请输入固定字符"
                      style="width: 66%"></a-input>
                    <a-button v-else-if="element.label == '复杂规则'" style="width: 66%" block
                      @click="showModal">设置规则</a-button>
                    <a-select v-else-if="element.label == '创建日期'" v-model:value="element.value"
                      :placeholder="`请选择${element.label}`" style="width: 66%" :options="numberSetOptions"
                      :filter-option="filterOption"
                      :getPopupContainer="(triggerNode) => triggerNode.parentNode"></a-select>
                    <div v-else>
                      <div style="margin-bottom: 10px">
                        <span>自动计数</span><a-button style="width: 66%">{{ element.autoNumberValue }}</a-button>
                      </div>
                      <div>
                        <span>当前计数</span>
                        <a-button disabled>未开始计数</a-button>
                        <a-button style="margin-left: 10px" @click="resetNumber(index)">重置</a-button>
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </template>
        </Draggable>
      </a-form-item>
      <!-- 标题设置 -->
      <a-form-item label="标题设置">
        <div class="draggable-option-title">
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link">
              <PlusOutlined :style="{ color: 'rgb(75, 100, 241)' }" />
              添加规则
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="0" @click="addRules('0')">
                  <span>固定字符</span>
                </a-menu-item>
                <a-menu-item key="0" @click="addRules('1')">
                  <span>表单字段</span>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <Draggable tag="ul" item-key="index" ghostClass="ghost" handle=".drag-item" :group="{ name: 'options' }"
          :list="titleRules">
          <template #item="{ element, index }">
            <div class="draggable-option">
              <a-row>
                <a-col :span="1" className="drag-item"><span class="iconfont up-Sort drag-item">
                    <UnorderedListOutlined style="width:10px" />
                  </span></a-col>
                <a-col :span="21" class="draggable-option-list">
                  <div class="draggable-option-item">
                    <span class="draggable-option-item-label">{{ element.label }}</span>
                    <a-select v-if="element.label == '表单字段'" placeholder="请输入表单字段" style="width: 66%" :options="options"
                      :filter-option="filterOption"
                      :getPopupContainer="(triggerNode) => triggerNode.parentNode"></a-select>
                    <a-input v-if="element.label == '固定字符'" v-model:value="element.value" placeholder="请输入固定字符"
                      style="width: 66%" :getPopupContainer="(triggerNode) => triggerNode.parentNode"></a-input>
                  </div>
                </a-col>
              </a-row>
            </div>
          </template>
        </Draggable>
      </a-form-item>

      <a-form-item label="流程提醒">
        <template v-for="item in _flowData.processConfigList.processReminder" :key="item">
          <a-row>
            <a-col :span="21" class="draggable-option-list">
              <div class="draggable-option-item">
                <span style="margin-right: 20px" class="draggable-option-item-label">{{ item.label }}</span>
                <a-switch v-model:checked="item.value" checked-children="开" un-checked-children="关" />
              </div>
            </a-col>
          </a-row>
        </template>
      </a-form-item>
    </a-form>
  </div>
  <!-- 弹窗 -->
  <!-- <WrsDialog :visible="visible" :footer="true" title="选择员工" width="800px" @cancel="visible = false">
    <template #dialog>
      <ChangeStaffDialog></ChangeStaffDialog>
    </template>
  </WrsDialog> -->
</template>
<script setup>
import { ref, watch, h, defineProps } from "vue";
import Draggable from "vuedraggable";
import { PlusOutlined, CloseCircleFilled, UnorderedListOutlined } from "@ant-design/icons-vue";
import { rulesList, rulesList2, rulesList3 } from "@/components/flowDesign/dicts/formType.js";
// import ChangeStaffDialog from "@/components/flowDesign/flowCommon/compoents/dialog/ChangeStaffDialog.vue";
// import WrsDialog from "@manage/wrs-common/components/WrsDialog/index.vue";
import { Modal } from "ant-design-vue";
import { debounce } from "lodash";
const props = defineProps({
  flowData: {
    type: Object,
  }
});
const emit = defineEmits(["updataFlowData"]);
const _flowData = ref(props.flowData);
const resetNumber = (index) => {
  Modal.confirm({
    title: "提示",
    content: `确定重置当前计数？`,
    icon() {
      return h("i", {
        class: "iconfont up-Attention"
      });
    },
    async onOk() {
      numberSetRules.value[index].autoNumberValue = 0;
    }
  });
};

/**
 *
 */
const visible = ref(false);
const showModal = () => {
  visible.value = true;
};
const handleOk = (e) => {
  console.log(e);
  visible.value = false;
};
/**
 *
 *
 */
//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
};

/**
 * 添加规则
 */
const numberSetOptions = [
  {
    value: "yyyy",
    label: "yyyy",
    picker: "year"
  },
  {
    value: "yyyymm",
    label: "yyyymm",
    picker: "month"
  },
  {
    value: "yyyymmdd",
    label: "yyyymmdd",
    picker: "date"
  }
];
const titleRules = ref(_flowData.value.processConfigList.titleSet);
const addRules = (e) => {
  if (e == "0") {
    titleRules.value.push({
      label: "固定字符",
      value: ""
    });
  } else {
    titleRules.value.push({
      label: "表单字段",
      value: ""
    });
  }
};
const numberSetRules = ref(_flowData.value.processConfigList.numberSet);
const addsetRules = (e) => {
  if (e == "0") {
    numberSetRules.value.unshift({
      label: "固定字符",
      value: "",
      remove: true
    });
  } else {
    numberSetRules.value.unshift({
      label: "复杂规则",
      value: "",
      remove: true
    });
  }
};
const deleteRe = (index) => {
  numberSetRules.value.splice(index, 1);
};

const options = ref([]);
const filterOption = (input, option) => {
  return option.areaName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
// 防抖
const updataNode = debounce(() => {
  console.log("flowData.value====", _flowData.value);
  emit("updataFlowData", _flowData.value);
}, 3000);
watch(
  () => _flowData.value,
  (newValue) => {
    _flowData.value = newValue;
    updataNode();
  },
  {
    deep: true,
    immediate: true
  }
);
</script>
<style lang="less" scoped>
@var09: #000000;
@var10: #cccccc;
@var11: rgb (75, 100, 241);

.form {
  height: calc(100vh + 23px);
  margin: 10px;

  .item-btn {
    margin: 5px 0;
    color: @var09;
    border-color: @var10;
  }

  .item-btn-active {
    color: rgb(75, 100, 241);
    border-color: rgb(75, 100, 241);
  }

  .draggable-option-title {
    margin-top: 5px;
    margin-bottom: 10px;
  }

  .draggable-option-list {
    padding: 12px 10px;

    .draggable-option-item {
      margin-bottom: 10px;

      .draggable-option-item-label {
        display: inline-block;
        width: 70px;
      }
    }

    .draggable-option-item-rule {
      span {
        padding-right: 5px;
      }
    }
  }
}
</style>
